<template>
  <div class="goodsSearch">
    <div class="sticky left-0 right-0 top-0 z-9 h-full bg-hex-ffffff px-28rpx pb-32rpx">
      <div class="z-999 flex items-center justify-between" :style="{ paddingTop: `${searchBarTop}px` }">
        <uni-icons type="back" size="28" @click.stop="goback" />
        <span class="flex-1 text-36rpx" style="text-align: center;">搜索</span>
      </div>
      <div class="mt-32rpx flex items-center">
        <div class="relative w-full">
          <input
            v-model.trim="searchVal"
            class="h-68rpx rounded-50 bg-hex-f5f5f5 pl-100rpx"
            placeholder-class="text-hex-CBCBCBFF text-26rpx font-400" type="text"
            placeholder="养生膳食"
            @confirm="onKeyboardConfirm">
          <div class="absolute left-32rpx top-50% h-40rpx w-40rpx translate-y-(-50%)">
            <image :src="`${cdnUrl}/imgs/shop/goodsSearchicon.png${imgVersion}`" mode="scaleToFill"
                   class="h-44rpx w-44rpx" />
          </div>
        </div>
        <div class="flex-1 whitespace-nowrap pl-32rpx pr-20rpx text-28rpx text-hex-999" @click="canaellation">
          取消
        </div>
      </div>
    </div>
    <div class="mt-32rpx flex items-center justify-between px-32rpx">
      <div class="text-28rpx font-500 text-hex-333">历史记录</div>
      <image :src="`${cdnUrl}/imgs/shop/deleteicon.png${imgVersion}`" mode="scaleToFill" class="h-44rpx w-44rpx" @click="delHistory" />
    </div>
    <div class="flex flex-wrap">
      <div v-for="item in historyList" :key="item"
           class="ml-32rpx mt-32rpx border-2rpx border-hex-f3f3f3 rounded-full border-solid px-25rpx py-5rpx text-26rpx font-500 text-hex-333"
           @click="heldHistory(item)">
        {{ item }}
      </div>
      <div v-if="historyList.length===0" class="flex-1 text-24rpx text-hex-999" style="text-align: center;">暂无数据</div>
    </div>
    <div class="mt-52rpx flex items-center justify-between px-28rpx">
      <div class="text-28rpx font-500 text-hex-333">热门推荐</div>
      <image :src="`${cdnUrl}/imgs/shop/refresh.png${imgVersion}`" mode="scaleToFill" class="h-44rpx w-44rpx" />
    </div>
    <div class="flex flex-wrap">
      <div v-for="item in hotSearchList" :key="item"
           class="ml-32rpx mt-32rpx border-2rpx border-hex-f3f3f3 rounded-full border-solid px-25rpx py-5rpx text-26rpx font-500 text-hex-333">
        {{ item.hotName }}</div>
      <div v-if="hotSearchList.length===0" class="flex-1 text-24rpx text-hex-999" style="text-align: center;">暂无数据</div>
    </div>
    <div class="mt-90rpx flex items-center justify-center">
      <div class="h-2rpx w-90rpx bg-hex-f0f0f0" />
      <div class="px-20rpx">猜你喜欢</div>
      <div class="h-2rpx w-90rpx bg-hex-f0f0f0" />
    </div>
    <div class="pt-25rpx">
      <div class="box-border rounded-t-32rpx pl-28rpx">
        <s-waterfall :datalist="goodsList" :column="2">
          <template #default="{ item }">
            <div class="mb-30rpx mr-28rpx rounded-32rpx bg-hex-fff pb-10rpx" @click="navTo(`/pages-shop/goodsdetails?productId=${item.productId}`)">
              <div class="bg-water box-border w-326rpx flex items-center justify-center rounded-xl bg-hex-fff p-40rpx">
                <image
                  class="will-change h-100% w-100% rounded-24rpx"
                  lazy-load
                  :src="item.productImage" mode="widthFix" />
              </div>
              <div class="p-15rpx">
                <text
                  class="multiLine-hiddle hide2 mx-10rpx mt-10rpx inline-block text-24rpx text-hex-333">{{ item.productName??item.productIntro }}</text>
                <div
                  v-if="item.newState===1"
                  class="my-20rpx w-48rpx rounded-5rpx bg-hex-FFF2E3 p-3rpx text-20rpx font-500 text-hex-E89C43">
                  上新
                </div>
                <div class="flex items-center justify-between">
                  <div>
                    <div class="flex items-end">
                      <div class="text-34rpx font-400 text-hex-ff4d4e">¥{{ item.productPrice }}</div>
                      <div class="textdecor ml-10rpx text-24rpx font-500 text-hex-999">￥{{ item.cost }}</div>
                    </div>
                    <div class="textdecor text-24rpx font-500 text-hex-999">已售{{ item.saleNum??0 }}</div>
                  </div>
                  <image :src="`${cdnUrl}/imgs/shop/cart-icon.png${imgVersion}`" class="h-44rpx w-44rpx" />
                </div>
              </div>
            </div>
          </template>
        </s-waterfall>
      </div>
    </div>
    <div><confirm ref="confirmRef" /></div>
  </div>
</template>

<script setup lang="ts">
import useShopSeach from '../composables/useShopSeach.ts'

const { historyList, addhistoryList, del } = useShopSeach()
let searchVal = $ref('')
let confirmRef: any = $ref()

const goback = () => {
  uni.navigateBack({
    delta: 1,
  })
}
const onKeyboardConfirm = (e) => {
  if (e.detail.value.trim() === '') {
    return
  }
  addhistoryList(e.detail.value)
  navTo(`/pages-shop/shopoutcome?title=搜索&q=${e.detail.value}`)
  searchVal = '' // 清空搜索框
}
//删除历史记录
const delHistory = () => {
  confirmRef.showConfirm('确定清空历史记录吗？').then(res => {
    if (res) del()
  })
}
//点击搜索历史
const heldHistory = (val) => {
  searchVal = val
  onKeyboardConfirm({ detail: { value: val } })
}
//热门推荐
let hotSearchList: any[] = $ref([])
//获取热门推荐
const getHotSearch = async () => {
  const { data, error, status } = await Fetch('/qqyapi/product/product/hot/list', {
    method: 'get',
    headers: {
      AppType: 3,
    },
  })
  if (status === 200 && data.code === 0) {
    hotSearchList = data?.result
  }
}
let goodsList = $ref([])
let pageNo = $ref(1)
let totalPage = $ref(0)
//获取猜你喜欢数据
const getLikeData = async () => {
  const { data, error, status } = await Fetch('/qqyapi/product/product/categoryArea/recommendProductList', {
    method: 'get',
    data: { appType: 3, pageNo, pageSize: 10 }, //首页只展示3个，点击查看更多
  })
  if (status === 200 && data.code === 0) {
    goodsList = [...goodsList, ...data.result.list]
    totalPage = data.totalPage
  }
}

const goodsDatails = (id) => {
  uni.navigateTo({
    url: `/pages-shop/goodsdetails?productId=${id}`,
  })
}
const canaellation = () => {
  uni.navigateBack({
    delta: 1,
  })
}
let searchBarTop: any = $ref('24')
let rightBar: any = $ref()

//下滑加载更多数据
const getMoreData = () => {
  if (totalPage !== pageNo) {
    pageNo++
    getLikeData()
  }
}
onReachBottom(() => {
  getMoreData()
})
onLoad(() => {
  getHotSearch()
  getLikeData()
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  rightBar = menuButtonInfo.width
  // #endif
})
</script>

<style lang="scss">
.goodsSearch {
  background: linear-gradient(180deg, #FFF 0%, #F5F5F5 100%);

  .textHide2 {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .textdecor {
    text-decoration: line-through;
  }
}
</style>
